
<template>
  <div>
    <page :asideShow="asideShow">
      <div slot="toolbar">
        <el-form :inline="true" :model="filters" label-position="right">
          <el-form-item label="选择小区:">
            <el-select
              v-model="filters.CID"
              filterable
              placeholder="请选择"
              clearable
              @change="refreshPageRequest(1)"
            >
              <el-option
                v-for="item in villageList"
                :key="item.CID"
                :label="item.name"
                :value="item.CID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery('a')">查询</el-button>
            <el-button type="primary" @click="handleAdd({})" v-show="hasPerm('news:WarnFit:add')">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 内容区域 -->
      <div slot="content">
        <el-table
          :header-cell-style="{ background: '#e7eaf0', color: '#606266' }"
          :data="pageResult"
          stripe
          v-loading="loading"
          style="width: 100%"
          element-loading-text="加载中..."
        >
          <el-table-column
            width="120"
            prop="CIDD"
            label="所在小区"
            align="center"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span>{{ scope.row.CIDD ? scope.row.CIDD : "-" }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="预警类型" align="center">
            <template slot-scope="scope">
              <span>
                {{
                  warningEvents.find((item) => {
                    return item.warningEvent === scope.row.warningEvent;
                  })
                    ? warningEvents.find((item) => {
                      return item.warningEvent === scope.row.warningEvent;
                    }).name || scope.row.type
                    : "-"
                }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="预警推送电话" align="center"></el-table-column>
          <el-table-column prop="warningType" label="标记人员类型" align="center">
            <template slot-scope="scope">
              <div>
                <span
                  v-for="(its, index) in scope.row.warningType"
                  :key="index"
                  class="ellipsis mr10"
                >
                  {{
                    signs.find((item) => {
                      return item.DID === its;
                    })
                      ? signs.find((item) => {
                        return item.DID === its;
                      }).name
                      : its
                  }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="updateTime" label="创建时间" align="center">
            <template slot-scope="scope">
              <span>{{ $format(scope.row.insertTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="250"
            :label="$t('action.operation')"
          >
            <template slot-scope="scope">
              <el-button
                type="danger"
                @click="handleDelete(scope.row)"
                v-show="hasPerm('news:WarnFit:remove')"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 底部区域 -->
      <div slot="footer">
        <el-pagination
          layout="total, prev, pager, next, jumper"
          @current-change="refreshPageRequest"
          :current-page="pageRequest.page"
          :page-size="pageRequest.limit"
          :total="totalSize"
          style="float: right"
        ></el-pagination>
      </div>
    </page>
    <el-dialog
      class="dialog-container"
      :title="title"
      :visible.sync="addVisible"
      :modal-append-to-body="false"
    >
      <addvote
        v-if="addVisible"
        :data="dataForm"
        :communities="getCommunity"
        @handleSave="handleSave"
        @closeEdit="closeEdit"
        @clickCancel="handleCancel"
      ></addvote>
    </el-dialog>
  </div>
</template>

<script>
import addvote from "./addvote";
export default {
  components: {
    addvote,
  },
  data() {
    return {
      villageList: [],
      loading: true,
      title: "详情",
      // 弹框
      dialogTableVisible: false,
      // 默认图片
      imgs: require("@/assets/imgs/houtai/wutu.png"),
      tableData: [],
      asideShow: false,
      unitShow: false,
      pageResult: [],
      getCommunity: [],
      filters: {
        CIDS: "",
      },
      pageRequest: {
        page: 1,
        limit: 10,
      },
      columns: [],
      loading: false,
      totalSize: 0,
      operation: false, // true:新增, false:编辑
      // 新增编辑界面是否显示
      editVisible: false,
      addVisible: false,
      // 新增编辑界面数据
      dataForm: {
        text: "",
        name: "",
        title: "",
      },
      dictList: {},
      warningEvents: [
        {
          warningEvent: "d9d70855-a1ac-4ead-903d-ba9f42dbb5c9",
          type: 2,
          name: "出小区预警",
        },
        {
          warningEvent: "7d6e016a-ab38-46c9-8ca2-a6c05cbc871b",
          type: 5,
          name: "进出小区预警",
        },
        {
          warningEvent: "42910cb4-397e-4add-9fe0-f8a04111bc44",
          type: 3,
          name: "特定时间预警",
        },
        {
          warningEvent: "4d9e2092-e5c5-4622-b6df-af87a23e7505",
          type: 7,
          name: "长时间未通行预警",
        },
        {
          warningEvent: "1773de6b-0f40-4f5d-8403-263f225f11d2",
          type: 9,
          name: "境外人员长时间未通行预警",
        },
        {
          warningEvent: "834c410b-6bb5-4b13-866b-24517d59256d",
          type: 8,
          name: "特定国家人员通行预警",
        },
        {
          warningEvent: "ea3b70ca-86a4-4445-9d24-5e3e0975ef2e",
          type: 25,
          name: "境外人员注册预警",
        },
      ],
      signs: [],
    };
  },
  async mounted() {
    this.getCommunityList();
    this.filters.CID = localStorage.getItem("home_CID");
    this.dictList = JSON.parse(sessionStorage.getItem("dictData"));
    this.signs = this.dictList.sys_person_sign
      .map((item) => {
        return item.dictionaries;
      })
      .flat();
    this.handleQuery();
    this.communitiesMix = await this.getCommunitiesMix();
  },
  methods: {
    // 查询列表
    handleQuery(val) {
      let param = {
        page: val ? "" : this.pageRequest.page,
        limit: val ? "" : this.pageRequest.limit,
      };
      let params = Object.assign(param, this.filters);
      let paramJson = JSON.stringify(params);
      this.loading = true;
      this.$api.wxNotic.earlyWarning_list(paramJson).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          this.pageResult = res.data;
          this.totalSize = res.count;
          this.pageResult.map((item) => {
            this.villageList.map((val) => {
              if (item.CID == val.CID) {
                item.CIDD = val.name;
              }
            });
          });
        } else {
          this.$message({ message: "操作失败, " + res.msg, type: "error" });
        }
      });
    },
    // 小区查询
    getCommunityList() {
      this.villageList = this.$store.state.village.villageList;
    },
    // 拼接图片
    getItemPhoto(id) {
      var url = this.global.baseUrlImage + "avatar/" + id;
      return url;
    },
    //删除
    handleDelete(row) {
      this.$confirm("确认删除选中记录吗？", "提示", {
        type: "warning",
      }).then(() => {
        let params = Object.assign({ _id: row._id }, { opration: 2 });
        this.$api.wxNotic.earlyWarning_configuration(params).then((res) => {
          this.editLoading = false;
          if (res.code == 0) {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.handleQuery();
          } else {
            this.$message({
              message: "操作失败, " + res.msg,
              type: "error",
            });
          }
        });
      });
    },
    // 翻页
    refreshPageRequest(val) {
      this.pageRequest.page = val;
      this.handleQuery();
    },
    // 新增
    handleAdd(row) {
      this.title = "新增";
      if (row.title) this.title = "编辑";
      this.addVisible = true;
      this.operation = true;
      this.dataForm = JSON.parse(JSON.stringify(row));
    },
    // 编辑
    handleEdit(row) {
      this.addVisible = false;
      this.editVisible = true;
      this.operation = false;
      this.dataForm = JSON.parse(JSON.stringify(row));
    },
    //添加切换到编辑
    changeEdit(row) { },
    handleSave: function () {
      this.editVisible = false;
      this.addVisible = false;
      this.handleQuery();
    },
    /* 保存成功关闭编辑弹窗 */
    closeEdit: function () {
      this.editVisible = false;
      // this.handleQuery()
      //设置重新加载路由及资源
      // store.commit("menuRouteLoaded", false)
    },
    /* 取消编辑 */
    handleCancel: function () {
      this.editVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 250px;
}
.mr10 {
  margin-right: 10px;
}
</style>
